<template>
  <div>
    <titleHead :Crumbs="Crumbs" class="headTitle"></titleHead>
    <div class="box">
      <frame1 width="1416px" slotContentHeight="690px">
        <div slot="title">文件管理</div>
        <div slot="content">
          <screen height="75px">
            <div style="display:flex">
              <div class="upload">
                <upload @Success="Success"/>
              </div>
              <div>
                <el-button size="small" icon="el-icon-download" type="primary" @click="download">下载</el-button>
              </div>
              <div style="margin-left: 60px">
                <input type="text" v-model="value" placeholder="请输入搜索内容" />
                <el-button size="small" icon="el-icon-search" type="primary" @click="getlist()">搜索</el-button>
              </div>
            </div>
          </screen>
          <div>
            <roll height="600px">
              <MediaTable :fileList="fileList" @attempt="attempt" @change="change" @del="del"/>
            </roll>
          </div>
        </div>
      </frame1>
    </div>
    <div class="audioBox" v-if="audioShow">
      <music :path="path" @close="close" />
    </div>
  </div>
</template>
<script>
import titleHead from "@/views/title.vue";
import screen from "@/components/screen";
import upload from "@/components/upload";
import MediaTable from "./StrategyManagement/children/MediaTable";
import music from "../../radioBroadcast/children/music";

import filePlay from "../../radioBroadcast/children/filePlay";
import frame1 from "@/components/frame";
import roll from "@/components/Roll";
export default {
  components: {
    filePlay,
    frame1,
    roll,
    titleHead,
    screen,
    upload,
    MediaTable,
    music
  },
  data() {
    return {
      Crumbs: {
        router: [],
        path: ["广播对讲系统", "分组管理"]
      },
      value: "",
      fileList: [],
      path: "",
      audioShow: false,
      fullPath: [],
      fileId:[]
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      this.$http.get("/api/threesuns/medias?name="+this.value).then(res => {
        this.fileList =res.data.data.map(item=>{
         item.format='MP3'
          return item
        })
      });
    },
   
    attempt(e) {
      this.path = e.fullPath;
      this.audioShow = true;
    },
    close() {
      this.audioShow = false;
    },
    change(e) {
      this.fullPath = e.map(item => {
         return {
            fileName:item.fileName,
            fullPath:item.fullPath
         }
      });
        this.fileId = e.map(item => {
        return e.id;
       });
    },
    download(){
      for (let i = 0; i < this.fullPath.length; i++) {
          var a = document.createElement("a");
          a.download =  this.fullPath[i].fileName;
          a.href = "/api/threesuns" +  this.fullPath[i].fullPath;
          a.click();
      }
    },
    del(e){
      console.log(e)
        this.$http.delete('/api/threesuns/medias/'+e.id).then(res=>{
            this.$message.success('删除成功');
           this.getlist()
        }).catch(err=>{
               this.$message.error('删除失败');
        })
    },
   Success(e){
     if(e.message=='文件名重复') {
        this.$message.warning('文件名重复');
     }else {
        this.$message.success('上传成功');
        this.getlist()

     }
   }
  }
};
</script>
<style scoped>
.box {
  margin: 60px auto;
}
.upload {
  width: 200px;
  padding-left: 40px;
}
input {
  height: 30px;
  width: 300px;
  outline: none;
  padding-left: 25px;
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  border: 1px solid #fff;
  margin-right: 20px;
  color: #fff;
}
.el-button {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid #fff;
}
.el-button:active {
  border: 1px solid #ccc;
}
.audioBox {
  width: 100%;
  height: 0px;
  top: 50%;
  left: 50%;
  position: fixed;
  z-index: 5;
}
/deep/ .el-upload-list{
  display: none;
}
</style>